<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生登记</title>
</head>
<body>
<style>
    div>p{
        margin-right: 100px;
    }
    div>div{
        display: flex;
        height: 20px;
    }
</style>
<form>
    <h1>用户添加</h1>
    ID: &nbsp;&nbsp; <input type="text" name="id" placeholder="ID会自动取整"><br>
    姓名:<input type="text" name="username" value=""><br>
    年龄:<input type="text" name="age" placeholder="年龄会自动四舍五入" value=""><br>
    出生日期:<input type="date" name="birth" value="2022/10/10"><br>
    爱好:<input type="checkbox" value="学习">学习
    <input type="checkbox" value="游戏">游戏
    <input type="checkbox" value="运动">运动<br>
    <input type="button" name="sub" value="登记" id="record">
    <hr>
</form>
<div>
    <div id="interval" style="color: red">
        已自动刷新 N 次
    </div>

    <div id="head">
        <p>ID</p>
        <p>姓名</p>
        <p>年龄</p>
        <p>出生日期</p>
        <p>爱好</p>
    </div>
</div>
<div id="content">

</div>
</body>
<script>
    //创建学生对象添加方法
    function addStu(id,name,age,birth,hobby) {
        let s = new Object();
        s.id = id;
        s.name = name;
        s.age = age;
        s.birth = birth;
        s.hobby = hobby;
        return s;
    }

    //使用赋值方式创建学生对象
    stu = {
        id : 1,
        name : '熊大',
        age : 12,
        birth : '2010-01-01',
        hobby : ['运动','学习']
    }

    let students = [stu]; //创建学生数组,存放学生对象

    //放置学生对象
    students.push(addStu(2,"熊二",18,"2002-01-01",["运动"]))

   function showStu(){
       let content = document.getElementById("content");
       content.innerHTML = ""; //将该部分置空 用于下面的循环显示新内容
       for(let i = 0;i<students.length;i++){
           //将学生对象通过js显示到页面上
           let line_1 = "<div id=\""+students[i].id+"\" >";
           let line_2 = "<p>"+students[i].id+"</p>";
           let line_3 = "<p>"+students[i].name+"</p>";
           let line_4 = "<p>"+students[i].age+"</p>";
           let line_5 = "<p>"+students[i].birth+"</p>";
           let line_6 = "<p>"+students[i].hobby+"</p>";
           let line_7 = "</div>"
           let res = line_1+line_2+line_3+line_4+line_5+line_6+line_7;
           content.innerHTML = content.innerHTML + res;
       }
   }

    let record = document.getElementById("record");
    record.onclick = function (){
        //登录按钮点击事件
        let id = document.getElementsByTagName("input")[0].value; //获取第一个输入框的内容
        let name = document.getElementsByTagName("input")[1].value; //获取第二个输入框的内容
        let age = document.getElementsByTagName("input")[2].value;
        let birth = document.getElementsByTagName("input")[3].value;
        let hobby = "";
        //获取选中的爱好
        for(let i = 4;i<7;i++){
            if(document.getElementsByTagName("input")[i].checked){
                hobby = document.getElementsByTagName("input")[i].value+","+hobby;
            }
        }
        id = Number(id);
        age = Math.round(age); //调用Math类库四舍五入
        if(id.toString()==='NaN'){
            alert("请输入数字ID！")
            return
        }
        id = Math.ceil(id)-1; //取整 先向上取整 然后减去一就相当于取整
        if(id.length<1||age.length<1||name.length<1||birth.length<1||hobby.length<1){
            alert("请输入完整的数据！")
            return
        }

        students.push(addStu(id,name,age,birth,hobby)); //添加在数组中
        showStu(); //展示到页面上
    }

    //使用定时器自动刷新
    let count = 0; //刷新次数
    setInterval("refresh();",1000);
    function refresh(){
       showStu();
       count++;
       document.getElementById("interval").innerText = " 已自动刷新 "+count+" 次"
    }
</script>
</html>